<template>
  <div class="a-flex a-row-center a-col-center h430" v-if="$isEmpty(data.HousesBRI)">
    <a-empty>
      <template #description>
        <p class="title">{{ options.title.text }}</p>
        <p class="text-secondary">暂无数据</p>
      </template>
    </a-empty>
  </div>
  <echartsView v-else :loading="loading" :options="options" class="h430"></echartsView>
</template>

<script>
import { echartsView } from '@/components'
export default {
  components: {
    echartsView,
  },
  props: {
    data: {
      required: true,
      type: Object,
      default: () => {},
    },
  },
  watch: {
    data: {
      deep: true,
      immediate: true,
      handler(n) {
        if (!this.$isEmpty(n)) {
          this.setOptions()
        }
      },
    },
  },
  data() {
    return {
      loading: false,
      options: {
        title: {
          text: '市辖区房屋分配',
          x: 'center',
        },
        grid: {
          left: 0,
          right: 0,
          bottom: 0,
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            interval: 0,
            color: '#000',
            //   rotate: 40
            formatter: function (params) {
              var newParamsName = ''
              var paramsNameNumber = params.length
              var provideNumber = 3
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber)
              if (paramsNameNumber > provideNumber) {
                for (var p = 0; p < rowNumber; p++) {
                  var tempStr = ''
                  var start = p * provideNumber
                  var end = start + provideNumber
                  if (p === rowNumber - 1) {
                    tempStr = params.substring(start, paramsNameNumber)
                  } else {
                    tempStr = params.substring(start, end) + '\n'
                  }
                  newParamsName += tempStr
                }
              } else {
                newParamsName = params
              }
              return newParamsName
            },
          },
          data: [],
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '市辖区房屋分配',
            data: [],
            type: 'bar',
          },
        ],
        dataZoom: [],
      },
    }
  },
  methods: {
    setOptions() {
      const { HousesBRI, UserTitle } = this.data
      const title = UserTitle.split(',')
      this.loading = true
      this.options.xAxis.data = HousesBRI.map((e) => e.RegionName)
      this.options.series[0].data = HousesBRI.map((e) => e.Count)
      this.options.series[0].name = title[1]
      this.options.title.text = title[1]
      if (HousesBRI.length > 12) {
        this.options.dataZoom.push({
          type: 'slider',
          show: true,
          xAxisIndex: [0],
          start: 0, // 初始化时，滑动条宽度开始标度
          bottom: '8%',
          end: 30,
          height: 0,
          fillerColor: '#3E86FF',
          borderColor: 'transparent',
          backgroundColor: 'white', // 两边未选中的滑动条区域的颜色
          showDataShadow: false, // 是否显示数据阴影 默认auto
          showDetail: false, // 即拖拽时候是否显示详细数值信息 默认true
        })
      }
      this.loading = false
    },
  },
}
</script>
<style lang="less" scoped>
.title {
  font-weight: 700;
  font-size: 20px;
}
.h430 {
  height: 430px !important;
}
</style>
